*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    background: #161616;
    overflow: hidden;
}
.content{
    width: 300px;
    position: relative;
    color: aliceblue;
    margin: auto;
}
.skill{
    list-style: none;
    margin-top: 50px;
}
.skill li{
    width: 100%;
    height: 4px;
    background: #000;
    border-radius: 3px;
    border-top: 1px solid #111;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    border-left: 1px solid #111;
    margin-bottom: 70px;
    position: relative;
}
.skill li em{
    position: relative;
    top: -30px;
}
.extends{
    display: inline-block;
    width: 0%;
    background: aqua;
    height: 2px;
    margin: 1px 0;
    box-shadow: 0 0 10px 1px rgba(0,255,255,0.6);
    position: absolute;
    left: 0;
    top: 0;
    transition:all 1s;
}
.h5{
    /*width: 60%;*/
    animation: h5 1s both;
}
@keyframes h5 {
    0%{
        width: 0;
    }
    100%{
        width: 60%;
    }
}
.c3{
    /*width: 70%;*/
    animation: c3 1s 1s both;
}
@keyframes c3 {
    0%{
        width: 0;
    }
    100%{
        width: 70%;
    }
}
.js{
    /*width: 80%;*/
    animation: js 1s 1.5s both;
}
@keyframes js {
    0%{
        width: 0;
    }
    100%{
        width: 80%;
    }
}
.vue{
    /*width: 90%;*/
    animation: vue 1s 2s both;
}
@keyframes vue {
    0%{
        width: 0;
    }
    100%{
        width: 90%;
    }
}
.react{
    /*width: 90%;*/
    animation: react 1s 2.5s both;
}
@keyframes react {
    0%{
        width: 0;
    }
    100%{
        width: 90%;
    }
}
.node{
    /*width: 50%;*/
    animation: node 1s 3s both;
}
@keyframes node {
    0%{
        width: 0;
    }
    100%{
        width: 50%;
    }
}
.webpack{
    /*width: 75%;*/
    animation: webpack 1s 3.5s both;
}
@keyframes webpack {
    0%{
        width: 0;
    }
    100%{
        width: 75%;
    }
}